import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:sp_util/sp_util.dart';
import 'package:yp/config/config.dart';
import 'package:yp/helper.dart';

import 'logic.dart';
import 'state.dart';

class GasAddPage extends StatefulWidget {
  @override
  _GasAddPageState createState() => _GasAddPageState();
}

class _GasAddPageState extends State<GasAddPage> {
  @override
  Widget build(BuildContext context) {
    final GasAddLogic logic = Get.put(GasAddLogic());
    final GasAddState state = Get.find<GasAddLogic>().state;

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        elevation: setWidth(1),
        title: Text(
          '我的燃气',
          style: TextStyle(
            color: Color(0xff222222),
            fontSize: 17,
          ),
        ),
        iconTheme: IconThemeData(
          color: Color(0xff222222),
        ),
      ),
      body: GetBuilder<GasAddLogic>(
        builder: (logic) {
          return Container(
            color: Color(0xffF5F5F5),
            height: ScreenUtil().screenHeight,
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.only(
                    left: setWidth(30),
                    top: setWidth(40),
                    right: setWidth(30),
                    bottom: setWidth(56),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        height: setWidth(88),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(setWidth(44)),
                          border: Border.all(
                            color: Color(0xffcccccc),
                            width: setWidth(1),
                          ),
                        ),
                        child: Row(
                          children: [
                            Container(
                              width: setWidth(60),
                              height: setWidth(88),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(setWidth(44)),
                                  bottomLeft: Radius.circular(setWidth(44)),
                                ),
                              ),
                              alignment: Alignment.center,
                              child: Icon(
                                Icons.search,
                                color: Color(0xffCCCCCC),
                                size: setWidth(30),
                              ),
                            ),
                            Expanded(
                              child: TextField(
                                controller: state.gasNumberController,
                                focusNode: state.gasNumberFocusNode,
                                maxLines: 1,
                                style: TextStyle(
                                  color: Color(0xff222222),
                                  fontSize: 14,
                                ),
                                onChanged: (value) {
                                  logic.onWhetherBindClick();
                                },
                                decoration: InputDecoration(
                                  fillColor: Colors.transparent,
                                  contentPadding: EdgeInsets.all(0),
                                  hintText: '请输入燃气编号',
                                  hintStyle: TextStyle(
                                    color: Color(0xffcccccc),
                                    fontSize: 14,
                                  ),
                                  enabledBorder: OutlineInputBorder(
                                    // 设置输入框可编辑时的边框样式
                                    borderRadius: BorderRadius.only(
                                      topRight: Radius.circular(setWidth(44)),
                                      bottomRight:
                                          Radius.circular(setWidth(44)),
                                    ),
                                    borderSide: BorderSide(
                                      // 用来配置边框的样式
                                      color: Colors.transparent, // 设置边框的颜色
                                      width: setWidth(2), // 设置边框的粗细
                                    ),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    // 用来配置输入框获取焦点时的颜色
                                    borderRadius: BorderRadius.only(
                                      topRight: Radius.circular(setWidth(44)),
                                      bottomRight:
                                          Radius.circular(setWidth(44)),
                                    ),
                                    borderSide: BorderSide(
                                      // 用来配置边框的样式
                                      color: Colors.transparent, // 设置边框的颜色
                                      width: setWidth(2), // 设置边框的粗细
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: setWidth(30),
                      ),
                         GetBuilder<GasAddLogic>( 
                          builder: (l) {
                            return Wrap(
                              children: [
                                Text(
                                  "标签",
                                  style: TextStyle(color: Color(0xffcccccc)),
                                ),
                                GestureDetector(
                                  onTap: () {
                                    state.selectedIndex = 0;
                                    l.update();
                                  },
                                  child: Container(
                                    padding: EdgeInsets.symmetric(
                                      horizontal: 30.w,
                                      vertical: 2.w,
                                    ),
                                    margin: EdgeInsets.only(
                                        left: 20.w, bottom: 20.w),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(40),
                                      border: Border.all(
                                        color: Color(0xffcccccc),
                                      ),
                                      color: state.selectedIndex == 0
                                          ? Config.mainColor
                                          : Color(0xffF5F5F5),
                                    ),
                                    child: Text(
                                      state.tagList[0],
                                      style: TextStyle(
                                        color: state.selectedIndex == 0
                                            ? Colors.white
                                            : Color(0xffcccccc),
                                      ),
                                    ),
                                  ),
                                ),
                                GestureDetector(
                                  onTap: () {
                                    state.selectedIndex = 1;
                                    l.update();

                                  },
                                  child: Container(
                                    padding: EdgeInsets.symmetric(
                                      horizontal: 30.w,
                                      vertical: 2.w,
                                    ),
                                    margin: EdgeInsets.only(
                                        left: 20.w, bottom: 20.w),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(40),
                                      border: Border.all(
                                        color: Color(0xffcccccc),
                                      ),
                                      color: state.selectedIndex == 1
                                          ? Config.mainColor
                                          : Color(0xffF5F5F5),
                                    ),
                                    child: Text(
                                      state.tagList[1],
                                      style: TextStyle(
                                        color: state.selectedIndex == 1
                                            ? Colors.white
                                            : Color(0xffcccccc),
                                      ),
                                    ),
                                  ),
                                ),
                                if (state.tagList[2] != "")
                                  GestureDetector(
                                    onTap: () {
                                      state.selectedIndex = 2;
                                    l.update();

                                    },
                                    child: Container(
                                      padding: EdgeInsets.symmetric(
                                        horizontal: 30.w,
                                        vertical: 2.w,
                                      ),
                                      margin: EdgeInsets.only(
                                          left: 20.w, bottom: 20.w),
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(40),
                                        border: Border.all(
                                          color: Color(0xffcccccc),
                                        ),
                                        color: state.selectedIndex == 2
                                            ? Config.mainColor
                                            : Color(0xffF5F5F5),
                                      ),
                                      child: Text(
                                        state.tagList[2],
                                        style: TextStyle(
                                          color: state.selectedIndex == 2
                                              ? Colors.white
                                              : Color(0xffcccccc),
                                        ),
                                      ),

                                    ),
                                  ),
                                GestureDetector(
                                  onTap: () {
                                    showDialog(
                                      context: context,
                                      barrierDismissible: false,
                                      builder: (BuildContext context) {
                                        return AlertDialog(
                                          title: Text('添加燃气标签'),
                                          content: TextField(
                                            controller: state.tagController,
                                            textAlignVertical:
                                                TextAlignVertical.center,
                                            onChanged: (value) {},
                                            decoration: InputDecoration(
                                              isDense: true,
                                              border: InputBorder.none,
                                              hintText: '请输入自定义标签',
                                              hintStyle: TextStyle(
                                                fontSize: 28.sp,
                                                color: Color(0xffcccccc),
                                              ),
                                            ),
                                          ),
                                          actions: <Widget>[
                                            FlatButton(
                                              onPressed: () =>
                                                  Navigator.of(context).pop(),
                                              child: Text('取消'),
                                            ),
                                            FlatButton(
                                              onPressed: () {
                                                if (state.tagController.text
                                                    .isNotEmpty) {
                                                  SpUtil.putString("gasTag",
                                                      state.tagController.text);

                                                  state.tagList[2] =
                                                      state.tagController.text;

                                                  l.update();
                                                }

                                                Navigator.of(context).pop();
                                              },
                                              textColor: Colors.red,
                                              child: Text('确定'),
                                            ),
                                          ],
                                        );
                                      },
                                    );
                                  },
                                  child: Container(
                                    padding: EdgeInsets.symmetric(
                                      horizontal: 30.w,
                                      vertical: 2.w,
                                    ),
                                    margin: EdgeInsets.only(left: 20.w),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(40),
                                      border: Border.all(
                                        color: Color(0xffcccccc),
                                      ),
                                    ),
                                    child: Text(
                                      "自定义",
                                      style:
                                          TextStyle(color: Color(0xffcccccc)),
                                    ),
                                  ),
                                ),
                              ],
                            );
                          },
                        ),
                      SizedBox(
                        height: setWidth(30),
                      ),
                      InkWell(
                        onTap: () {
                          if (state.whetherBindBool) {
                            print('立即绑定 按钮点击事件！！！');
                            logic.bindingNaturalGas(
                                gasCode: state.gasNumberController.text);
                          } else {
                            toast('请输入燃气编号');
                          }
                        },
                        child: Container(
                          height: setWidth(88),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(setWidth(44)),
                            color: Color(0xffEA5504)
                                .withOpacity(state.hasInput.value ? 1 : 0.4),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '立即绑定',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
